<template>
  <!-- 期限结构定义页面 -->
  <div>
    <el-row class="termStructureDefinition container">
      <el-col style="margin-right:10px;" :span="16" class="content-left">
        <el-row class="handleBox" >
          <el-col :span="18">
            <el-button type="primary" @click="addFunc">新增</el-button>
            <el-button  @click="editFunc">编辑</el-button>
            <el-button  @click="delFunc">删除</el-button>
          </el-col>
          <el-col :span="6">
            <div class="handleIconBox">
                <i
                  class="iconfont icon-export"
                  title="导出"
                  slot="reference"
                ></i>
              <i
                  class="iconfont icon-import"
                  title="导入"
                  slot="reference"
                ></i>
               
              <el-popover
                placement="bottom"
                trigger="click"
                popper-class="icon_porper"
              >
                <div class="search_porper">
                  <el-form
                    :model="searchForm"
                    ref="searchForm"
                    label-width="60px"
                    label-position="right"
                    size="mini"
                  >
                    <el-form-item label="编码：">
                      <el-input
                        v-model="searchForm.structureCode"
                        style="width:150px"
                        placeholder="请输入编码"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="名称：">
                      <el-input
                        v-model="searchForm.structureName"
                        style="width:150px"
                        placeholder="请输入名称"
                      ></el-input>
                    </el-form-item>
                  </el-form>
                  <div style="text-align:center;padding:10px">
                    <el-button type="primary" size="mini" @click="searchFunc"> 查询</el-button>
                    <el-button
                      size="mini"
                      @click="
                        (searchForm.structureCode = ''), (searchForm.structureName = '')
                      "
                      >重置</el-button
                    >
                  </div>
                </div>
                <i
                  class="iconfont icon-sousuo"
                  title="搜索"
                  slot="reference"
                ></i>
              </el-popover>
              <el-popover
                placement="bottom"
                width="150"
                trigger="click"
                popper-class="icon_porper"
              >
                <div class="operation_checkbox">
                  <el-checkbox-group v-model="checkList">
                    <el-checkbox
                      v-for="item in textData"
                      :label="item.label"
                      :key="item.prop"
                      >{{ item.label }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                <i
                  class="iconfont icon-liebiaoshezhi"
                  title="列表设置"
                  slot="reference"
                ></i>
              </el-popover>
               
            </div>
          </el-col>
        </el-row>
        <el-table
          ref="multipleTable"
          :data="tableData"
          style="width: 100%"
          @row-click="authorizeFor"
        >
          <el-table-column
            width="55"
            type="selection"
            fixed="left"
          ></el-table-column>
          <el-table-column
            prop="structureCode"
            label="编号 "
            align="center"
            v-if="columnState[0]"
          >
          </el-table-column>
          <el-table-column
            prop="structureName"
            label="名称"
            align="center"
            v-if="columnState[1]"
          >
          </el-table-column>
          <el-table-column
            prop="creator"
            label="创建人"
            v-if="columnState[2]"
          >
          </el-table-column>
           <el-table-column
            prop="createdTm"
            label="创建时间"
            sortable
            v-if="columnState[2]"
            :formatter="row=>timeFormat(row.createdTm)"
          >
          </el-table-column>
           <el-table-column
            prop="modifier"
            label="修改人"
            v-if="columnState[3]"
          >
          </el-table-column>
          <el-table-column
            prop="modifiedTm"
            label="修改时间"
            v-if="columnState[4]"
            sortable
            :formatter="row=>timeFormat(row.modifiedTm)"
          >
          </el-table-column>

          <!-- <el-table-column label="操作" width="180" fixed="right"></el-table-column> -->
        </el-table>
        <pagination
        @size-change="sizeChange"
        @current-change="pageChange"
        @refresh="searchFunc"
        :current="searchForm.page"
        :total="total"
      ></pagination>
      </el-col>
      <el-col :span="7" class="content-right">
        <div class="title" style="padding-left:0;margin-left:0">
            <div style="padding:0 0 20px 20px">
                期限结构值
            </div>
          <div style="float:left;padding:0 0 20px 0px" >
            <el-button type="primary" @click="addItemFunc">新增</el-button>
            <el-button type="normal" @click="editItemFunc">编辑</el-button>
            <el-button type="normal" @click="delItemFunc">删除</el-button>
          </div>
        </div>
        <el-table
          ref="termValueTable"
          :data="termValueTableList"
          style="width: 100%"
          class="isRightTable"
          :header-cell-style="$store.state.style.tableHead"
          :cell-style="$store.state.style.tableBody"
          :row-click="termValueRowClick"
        >
          <el-table-column
            width="55"
            type="selection"
            fixed="left"
          ></el-table-column>
          <el-table-column
            prop="termValue"
            label="期限 "
          ></el-table-column>
          <el-table-column
            prop="termUnit"
            label="期限单位"
            :formatter="row=>{return row.termUnit=='Y'?'年':row.termUnit=='M'?'月':'日'}"
          ></el-table-column>
          
        </el-table>
      </el-col>
    </el-row>
    <!-- 新增/编辑字典类型 -->
    <el-dialog v-dialogDrag
      :title="termFormTitle[saveFlg - 1]"
      :visible.sync="addOrEdit"
      width="35%"
    >
      <el-form
        :model="saveForm"
        ref="addTreeForm"
        label-width="150px"
        label-position="left"
        :rules="saveFormRules"
      >
            <el-form-item label="期限结构编号：" prop="structureCode">
              <el-input
                :disabled="saveFlg == 2"
                v-model="saveForm.structureCode"
                maxlength="40"
              ></el-input>
            </el-form-item>
            <el-form-item label="期限结构名称：" prop="structureName">
              <el-input
                v-model="saveForm.structureName"
                maxlength="40"
              ></el-input>
            </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button 
         @click="addOrEdit = false"
          >确 定</el-button>
        <el-button 
        @click="addOrEdit = false"
        >取 消</el-button>
      </div>
    </el-dialog>
    <!-- 新增/编辑字典项 -->
    <el-dialog v-dialogDrag
      :title="saveItemTitles[saveItemFlg-1]"
      :visible.sync="isItemVisible"
      width="35%"
      top="2%"
    >
    <el-form
        :model="saveItemForm"
        ref="saveItemForm"
        label-width="100px"
        label-position="left"
      >
          
            <el-form-item label="期限：" prop="termValue" required>
              <el-input
                v-model="saveItemForm.termValue"
                maxlength="40"
              ></el-input>
            </el-form-item>
            <el-form-item label="期限类型：" prop="termUnit" required>
              <el-select
                v-model="saveItemForm.termUnit"
                placeholder="请选择"
                style="width:100%"
              >
                <el-option value="Y" label="年"></el-option>
                <el-option value="M" label="月"></el-option>
                <el-option value="D" label="日"></el-option>
              </el-select>
            </el-form-item>
      </el-form>
         <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="isItemVisible = false"
          >确 定</el-button
        >
        <el-button @click="isItemVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { publicManage } from "@/api/index";
import moment from "moment";

export default {
  name:"termStructureDefinition",
  data() {
    return {
      addOrEdit: false, // 新增/编辑字典弹窗
      isItemVisible: false, // 新增/编辑字典项弹窗
      saveFlg: 1, // 1:新增，2：编辑，（字典）
      saveItemFlg: 1 ,// 1:新增，2：编辑 （字典项）
      termFormTitle: ["添加期限结构定义", "编辑期限结构定义"],
      saveItemTitles:["添加曲线期限值","修改曲线期限值"],
      // 机构树
      orgList: [
        {
          value: "01",
          label: "一级机构",
          children: [{ value: "001", label: "二级机构" }]
        }
      ],
      // save表单机构树悬停提示
      saveOrgTip: "",
      searchForm: {
        page:1,
        size:15
      },
      total:100,
      saveForm: {
        structureCode: "",
        structureName: "",
       
      },
      saveItemForm:{},
      saveFormRules: {
        structureCode: [
          { required: true, message: "该输入项为必输项", trigger: "blur" }
        ],
        structureName: [
          { required: true, message: "该输入项为必输项", trigger: "blur" }
        ],
      },
      checkList: [],
      checkListRight: [],
      // 列隐藏
      textData: [
        {  label: "编号" },
        {  label: "名称" },
        { label: "创建人  " },
        { label: "创建时间 " },
        { label: "修改人 " },
        { label: "修改时间 " },
      ],
      // 获取table的数据
      tableData: [{"creator":"sysadmin","createdTm":null,"modifier":null,"modifiedTm":null,"structureCode":"TM_AUTO_TEST","structureName":"AUTO自动测试期限结构"},{"creator":"sys","createdTm":1600996676088,"modifier":null,"modifiedTm":null,"structureCode":"HLzero","structureName":"HL零收益曲线"},{"creator":"sys","createdTm":1598923396991,"modifier":null,"modifiedTm":null,"structureCode":"10010","structureName":"1D"},{"creator":"sys","createdTm":1597047153843,"modifier":null,"modifiedTm":null,"structureCode":"10115","structureName":"1Y/5Y"},{"creator":"sys","createdTm":1597047136545,"modifier":null,"modifiedTm":null,"structureCode":"10104","structureName":"1D/3M/6M/1Y/2Y/3Y/5Y"},{"creator":"sys","createdTm":1597047116357,"modifier":"sys","modifiedTm":1597047552879,"structureCode":"10103","structureName":"1Y/3Y/5Y/10Y/15Y/20Y/30Y"},{"creator":"sys","createdTm":1586098537220,"modifier":"sys","modifiedTm":1594888839289,"structureCode":"RMB_qxcd","structureName":"人民币存贷款曲线期限"},{"creator":"sys","createdTm":1586098505867,"modifier":null,"modifiedTm":null,"structureCode":"RMB_qx","structureName":"人民币曲线期限"},{"creator":"sysadmin","createdTm":1565247313633,"modifier":"sys","modifiedTm":1594108128725,"structureCode":"002","structureName":"短期限结构"},{"creator":"sysadmin","createdTm":1561684901690,"modifier":null,"modifiedTm":null,"structureCode":"TC_Shibor","structureName":"Shibor期限"}],
      termValueTableList: [{"creator":"sysadmin","createdTm":null,"modifier":null,"modifiedTm":null,"termId":"AF9483A381055BE0E0537D0DA8C048D2","structureCode":"TM_AUTO_TEST","termValue":"1","termUnit":"M","orderNum":null,"valueForShow":"1月"},{"creator":"sysadmin","createdTm":null,"modifier":null,"modifiedTm":null,"termId":"AF9483A381065BE0E0537D0DA8C048D2","structureCode":"TM_AUTO_TEST","termValue":"3","termUnit":"M","orderNum":null,"valueForShow":"3月"},{"creator":"sysadmin","createdTm":null,"modifier":null,"modifiedTm":null,"termId":"AF9483A381075BE0E0537D0DA8C048D2","structureCode":"TM_AUTO_TEST","termValue":"6","termUnit":"M","orderNum":null,"valueForShow":"6月"},{"creator":"sysadmin","createdTm":null,"modifier":null,"modifiedTm":null,"termId":"AF9483A381085BE0E0537D0DA8C048D2","structureCode":"TM_AUTO_TEST","termValue":"9","termUnit":"M","orderNum":null,"valueForShow":"9月"},{"creator":"sysadmin","createdTm":null,"modifier":null,"modifiedTm":null,"termId":"AF9483A381095BE0E0537D0DA8C048D2","structureCode":"TM_AUTO_TEST","termValue":"1","termUnit":"Y","orderNum":null,"valueForShow":"1年"},{"creator":"sysadmin","createdTm":null,"modifier":null,"modifiedTm":null,"termId":"AF9483A3810A5BE0E0537D0DA8C048D2","structureCode":"TM_AUTO_TEST","termValue":"3","termUnit":"Y","orderNum":null,"valueForShow":"3年"},{"creator":"sysadmin","createdTm":null,"modifier":null,"modifiedTm":null,"termId":"AF9483A3810B5BE0E0537D0DA8C048D2","structureCode":"TM_AUTO_TEST","termValue":"5","termUnit":"Y","orderNum":null,"valueForShow":"5年"}],
      searchFormItem: {
        dictName: "",
        status: ""
      },
      // 口径层级配置表格列配置
      showConfigData: [
        { prop: "caliberCode", label: "口径编码", align: "center" },
        { prop: "caliberName", label: "口径名称" },
        { prop: "caliberProject.caliberProjectName", label: "所属口径方案 " }
      ],
      configTableData: [
        {
          creator: "sysadmin",
          createdTm: null,
          modifier: null,
          modifiedTm: null,
          caliberCode: "9900001",
          caliberName: "存量_假日不调整",
          caliberProject: {
            creator: "sys",
            createdTm: 1545823874000,
            modifier: "农发总行管理员",
            modifiedTm: 1595469069877,
            caliberProjectCode: "VP_ALM_COA",
            caliberProjectName: "泛鹏银行资产负债账户册",
            moduleCode: "alm",
            caliberProjectDesc: null
          },
          caliberDesc: null,
          caliberSublevel: "0",
          codeAndName: "9900001--存量_假日不调整"
        },
        {
          creator: "sysadmin",
          createdTm: null,
          modifier: null,
          modifiedTm: null,
          caliberCode: "9900002",
          caliberName: "存量_假日向后",
          caliberProject: {
            creator: "sys",
            createdTm: 1545823874000,
            modifier: "农发总行管理员",
            modifiedTm: 1595469069877,
            caliberProjectCode: "VP_ALM_COA",
            caliberProjectName: "泛鹏银行资产负债账户册",
            moduleCode: "alm",
            caliberProjectDesc: null
          },
          caliberDesc: null,
          caliberSublevel: "0",
          codeAndName: "9900002--存量_假日向后"
        },
        {
          creator: "sysadmin",
          createdTm: null,
          modifier: null,
          modifiedTm: null,
          caliberCode: "9900003",
          caliberName: "存量_假日修正向后",
          caliberProject: {
            creator: "sys",
            createdTm: 1545823874000,
            modifier: "农发总行管理员",
            modifiedTm: 1595469069877,
            caliberProjectCode: "VP_ALM_COA",
            caliberProjectName: "泛鹏银行资产负债账户册",
            moduleCode: "alm",
            caliberProjectDesc: null
          },
          caliberDesc: null,
          caliberSublevel: "0",
          codeAndName: "9900003--存量_假日修正向后"
        },
        {
          creator: "sysadmin",
          createdTm: null,
          modifier: null,
          modifiedTm: null,
          caliberCode: "9900004",
          caliberName: "存量_假日向前",
          caliberProject: {
            creator: "sys",
            createdTm: 1545823874000,
            modifier: "农发总行管理员",
            modifiedTm: 1595469069877,
            caliberProjectCode: "VP_ALM_COA",
            caliberProjectName: "泛鹏银行资产负债账户册",
            moduleCode: "alm",
            caliberProjectDesc: null
          },
          caliberDesc: null,
          caliberSublevel: "0",
          codeAndName: "9900004--存量_假日向前"
        },
        {
          creator: "sysadmin",
          createdTm: null,
          modifier: null,
          modifiedTm: null,
          caliberCode: "9900005",
          caliberName: "存量_假日修正向前",
          caliberProject: {
            creator: "sys",
            createdTm: 1545823874000,
            modifier: "农发总行管理员",
            modifiedTm: 1595469069877,
            caliberProjectCode: "VP_ALM_COA",
            caliberProjectName: "泛鹏银行资产负债账户册",
            moduleCode: "alm",
            caliberProjectDesc: null
          },
          caliberDesc: null,
          caliberSublevel: "0",
          codeAndName: "9900005--存量_假日修正向前"
        },
        {
          creator: "sysadmin",
          createdTm: null,
          modifier: null,
          modifiedTm: null,
          caliberCode: "9900006",
          caliberName: "存量_还款计划",
          caliberProject: {
            creator: "sys",
            createdTm: 1545823874000,
            modifier: "农发总行管理员",
            modifiedTm: 1595469069877,
            caliberProjectCode: "VP_ALM_COA",
            caliberProjectName: "泛鹏银行资产负债账户册",
            moduleCode: "alm",
            caliberProjectDesc: null
          },
          caliberDesc: null,
          caliberSublevel: "0",
          codeAndName: "9900006--存量_还款计划"
        },
        {
          creator: "sysadmin",
          createdTm: null,
          modifier: null,
          modifiedTm: null,
          caliberCode: "9900007",
          caliberName: "存量_指标_固定_到期还本",
          caliberProject: {
            creator: "sys",
            createdTm: 1545823874000,
            modifier: "农发总行管理员",
            modifiedTm: 1595469069877,
            caliberProjectCode: "VP_ALM_COA",
            caliberProjectName: "泛鹏银行资产负债账户册",
            moduleCode: "alm",
            caliberProjectDesc: null
          },
          caliberDesc: null,
          caliberSublevel: "0",
          codeAndName: "9900007--存量_指标_固定_到期还本"
        },
        {
          creator: "sysadmin",
          createdTm: null,
          modifier: null,
          modifiedTm: null,
          caliberCode: "9900008",
          caliberName: "存量_指标_固定_等额本金",
          caliberProject: {
            creator: "sys",
            createdTm: 1545823874000,
            modifier: "农发总行管理员",
            modifiedTm: 1595469069877,
            caliberProjectCode: "VP_ALM_COA",
            caliberProjectName: "泛鹏银行资产负债账户册",
            moduleCode: "alm",
            caliberProjectDesc: null
          },
          caliberDesc: null,
          caliberSublevel: "0",
          codeAndName: "9900008--存量_指标_固定_等额本金"
        },
        {
          creator: "sysadmin",
          createdTm: null,
          modifier: null,
          modifiedTm: null,
          caliberCode: "9900009",
          caliberName: "存量_指标_浮动_到期还本",
          caliberProject: {
            creator: "sys",
            createdTm: 1545823874000,
            modifier: "农发总行管理员",
            modifiedTm: 1595469069877,
            caliberProjectCode: "VP_ALM_COA",
            caliberProjectName: "泛鹏银行资产负债账户册",
            moduleCode: "alm",
            caliberProjectDesc: null
          },
          caliberDesc: null,
          caliberSublevel: "0",
          codeAndName: "9900009--存量_指标_浮动_到期还本"
        },
        {
          creator: "sysadmin",
          createdTm: null,
          modifier: null,
          modifiedTm: null,
          caliberCode: "9900010",
          caliberName: "存量_指标_浮动_等额本金",
          caliberProject: {
            creator: "sys",
            createdTm: 1545823874000,
            modifier: "农发总行管理员",
            modifiedTm: 1595469069877,
            caliberProjectCode: "VP_ALM_COA",
            caliberProjectName: "泛鹏银行资产负债账户册",
            moduleCode: "alm",
            caliberProjectDesc: null
          },
          caliberDesc: null,
          caliberSublevel: "0",
          codeAndName: "9900010--存量_指标_浮动_等额本金"
        }
      ],
      addTreeForm: {
        name: "",
        code: ""
      }
    };
  },
  created() {
    this.checkListInit();
    // console.log(this.tableData, "模拟数据");
  },
  computed: {
    columnState() {
      let arr = [],
        arr1 = this.textData,
        arr2 = this.checkList;
      for (let i = 0; i < arr1.length; i++) {
        let flg = false;
        for (let j = 0; j < arr2.length; j++) {
          if (arr1[i].label === arr2[j]) {
            flg = true;
          }
        }
        arr.push(flg);
      }
      return arr;
    },
  },
  mounted() {
    // this.getList();
  },
  watch: {},
  methods: {
    // 处理save表单机构选中事件
    checkFormOrg() {
      let node = this.$refs.saveOrgTree.getCheckedNodes();
      this.$refs.saveOrgTree.dropDownVisible = false; // 隐藏模态框
      if (node.length != 0) {
        this.saveForm.orgName = node[0].label;
        this.saveOrgTip = node[0].label;
      } else {
        this.saveForm.orgName = "";
        this.saveOrgTip = "";
      }
    },
    // // 两个密码校验
    // validPassword(rule, value, callback) {
    //   if (this.saveForm.password === this.saveForm.passwordStr) {
    //     callback();
    //   } else {
    //     callback(new Error("两次输入密码不一致"));
    //   }
    // },
    checkListInit() {
      this.checkList = this.textData.map(v => {
        return v.label;
      });
    },
    searchFunc(){
      console.log(this.searchForm)
    },
    addFunc() {
      this.saveFlg = 1;
      for (let k in this.saveForm) {
        this.saveForm[k] = "";
      }
      this.addOrEdit = true;
    },
    editFunc() {
      this.saveFlg = 2;
      let selection = this.$refs.multipleTable.selection;
      if (selection.length != 1) {
        return this.$message.warning("请选择一条数据进行修改");
      }
      let row = selection[0];
      let form = { ...row };
      this.saveForm = form;
      this.addOrEdit = true;
    },

    delFunc() {
      let selection = this.$refs.multipleTable.selection;
      if (selection.length < 1) {
        return this.$message.warning("请选择要删除的数据");
      }
      this.$confirm(
        "你确定要删除选中的数据吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          // 掉接口
          this.$message.success("删除成功");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

     addItemFunc() {
      this.saveItemFlg = 1;
      for (let k in this.saveForm) {
        this.saveForm[k] = "";
      }
      this.isItemVisible = true;
    },
    editItemFunc() {
      this.saveItemFlg = 2;
      let selection = this.$refs.termValueTable.selection;
      if (selection.length != 1) {
        return this.$message.warning("请选择一条数据进行修改");
      }
      let row = selection[0];
      let form = { ...row };
      this.saveItemForm = form;
      this.isItemVisible = true;
    },

    delItemFunc() {
      let selection = this.$refs.termValueTable.selection;
      if (selection.length < 1) {
        return this.$message.warning("请选择要删除的数据");
      }
      this.$confirm(
        "你确定要删除选中期限吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          this.$message.success("删除成功");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleNodeClick() {
      let nodes = this.$refs.caliberConfigTree.getCheckedNodes();
      console.log(nodes);
    },
    caliberProjectNameFormatter(row) {
      return row.caliberProject.caliberProjectName;
    },
    getList() {
      publicManage.query("我的参数").then(res => {
        console.log(res);
      });
    },
    // 点击表格右侧显示
    authorizeFor(row) {
      if (this.$refs.multipleTable) {
        this.$refs.multipleTable.clearSelection();
      }
      this.$refs.multipleTable.toggleRowSelection(row, true);
    },
    // 行点击即选中
     termValueRowClick(row) {
      if (this.$refs.termValueTable) {
        this.$refs.termValueTable.clearSelection();
      }
      this.$refs.termValueTable.toggleRowSelection(row, true);
    },
     timeFormat(val) {
       if(val)
      return moment(val).format("YYYY-MM-DD");
    },
    // 获取层级配置口径树
    getConfigTree(row) {
      this.$refs.configTable.toggleRowSelection(row);
    },
    sizeChange(val) {
      this.searchForm.size = val
      console.log(`每页 ${val} 条`);
    },
    pageChange(val) {
      this.searchForm.page = val
      console.log(`当前页: ${val}`);
    }
    
  }
};
</script>

<style lang="scss" scoped>
</style>